var dialogEX = require(path.join(__dirname, '_dialog.js')); //弹出框
var form = require(path.join(__dirname, 'form.js'));

var urlItem = function (data, parent) {
    this.id = data.id;
    this.data = data;
    this.parent = parent;
    this.html = $(`
        <div class="urlItem">
            <span class="name"></span>
            <span class="url"></span>
            <i class="fa fa-edit edit"></i>
            <i class="fa fa-times delete"></i>
        </div>
    `);

    this.url = this.html.find('.url');
    this.url.text(data.url);
    this.name = this.html.find('.name');
    this.name.text(data.name);

    this.edit = this.html.find('.edit').click(() => {
        var body = form.form([{
            key: 'url',
            type: 'input',
            boxSetting: {
                lable: 'URL ： ',
                size: 'normal',
                className: '',
            },
            elementSetting: {
                size: 'normal',
                jude: {
                    name: 'URL',
                    rules: ['notNull', 'isUrl']
                },
            },
        }, {
            key: 'name',
            type: 'input',
            boxSetting: {
                lable: '名称 ： ',
                size: 'normal',
                className: '',
            },
            elementSetting: {
                size: 'normal',
            },
        }]);

        body.set(this.data);

        var _dialog = dialogEX({
            width: 500,
            height: 300,
            title: '修改URL',
            body: body.html,
            className: 'URLAddDialog',
            buttons: [
                {
                    className: 'URLAddDialogButton',
                    event: () => {
                        var data = body.get();
                        if (data) {
                            this.parent.event.updata(this.id, data, (docs) => {
                                this.setData(data);
                                _dialog.close();
                            });
                        };
                    },
                    text: '修改'
                }
            ]
        });
    });
    this.delete = this.html.find('.delete').click(() => {
        dialogEX({
            title: '警告',
            body: '<div style="padding:20px;">是否删除 URL : ' + this.data.name + ' ？</div>',
            buttons: [{
                text: '确定',
                event: (event) => {
                    this.parent.delete(this.id);
                    event.close();
                },
            }, {
                text: '取消',
                event: (event) => {
                    event.close();
                },
            }],
            width: 400,
            height: 200,
        });

    });



};
urlItem.prototype.setData = function (data) {
    this.data = data;
    this.url.text(data.url);
    this.name.text(data.name);
};

var urlModal = function () {
    this.data = {};
    this.item = {};
    this.event = {
        getAll: function () { },
        creat: function () { },
        updata: function () { },
        delete: function () { },
    };
    this.html = $('<div id="urlModal" style="display:none"></div>');
    this.addbutton = $('<div class="addbutton">添加URL</div>').click(() => {
        var body = form.form([{
            key: 'url',
            type: 'input',
            boxSetting: {
                lable: 'URL ： ',
                size: 'normal',
                className: '',
            },
            elementSetting: {
                size: 'normal',
                jude: {
                    name: 'URL',
                    rules: ['notNull', 'isUrl']
                },
            },
        }, {
            key: 'name',
            type: 'input',
            boxSetting: {
                lable: '名称 ： ',
                size: 'normal',
                className: '',
            },
            elementSetting: {
                size: 'normal',
            },
        }]);

        var _dialog = dialogEX({
            width: 500,
            height: 300,
            title: '添加URL',
            body: body.html,
            className: 'URLAddDialog',
            buttons: [
                {
                    className: 'URLAddDialogButton',
                    event: () => {
                        var data = body.get();
                        if (data) {
                            this.event.creat(data, (docs) => {
                                this.item[docs.id] = new urlItem(docs, this);
                                this.box.append(this.item[docs.id].html);
                                _dialog.close();
                            });
                        };
                    },
                    text: '添加'
                }
            ]
        });
    });

    this.box = $('<div class="urlBox"></div>');
    this.html.append(this.addbutton).append(this.box);
};

urlModal.prototype.show = function () {
    this.event.getAll((docs) => {
        this.setData(docs);
    });
    this.html.css({ display: 'block' });
};
urlModal.prototype.hide = function () {
    this.html.css({ display: 'none' });
};
urlModal.prototype.render = function () {
    return this.html;
};
urlModal.prototype.on = function (str, event) {
    if (this.event.hasOwnProperty(str)) {
        this.event[str] = event;
    };
};
urlModal.prototype.setData = function (data) {
    this.data = {};
    this.box.empty();
    for (let i = 0; i < data.length; i++) {
        const items = data[i];
        this.item[items.id] = new urlItem(items, this);
        this.box.append(this.item[items.id].html);
    };
};
urlModal.prototype.delete = function (id) {
    this.event.delete(id, (doc) => {
        if (this.item.hasOwnProperty(id)) {
            const _item = this.item[id];
            _item.html.remove();
            delete this.item[id];
        }
    });
};

module.exports = function () {
    return new urlModal();
};